<template>
  <div class="body_">
    <!-- <div class="header">
      <div class="TitleForm">
        <el-form
          ref="SearchForm"
          :model="SearchForm"
          label-width="120px"
          inline
        >
          <el-form-item prop="name" label="歌曲名称">
            <el-input
              placeholder="请输入名称或编码"
              v-model="SearchForm.name"
            ></el-input>
          </el-form-item>
          <el-form-item prop="state" label="设备状态">
            <el-input
              placeholder="选择设备状态"
              v-model="SearchForm.state"
            ></el-input>
          </el-form-item>

                   <el-form-item prop="name" label="设备编码">
                    <el-input
                       placeholder="请输入名称或编码"
                      v-model="SearchForm.name"
                      ></el-input>
                  </el-form-item>
        </el-form>
        <div class="queryBtn">
          <el-button @click="Select(true)" type="primary" icon="el-icon-search"
            >搜索</el-button
          >
          <el-button
            @click="resetSearchForm('SearchForm')"
            type="primary"
            icon="el-icon-refresh-left"
            >重置</el-button
          >
        </div>
      </div>
    </div> -->

    <div class="main">
      <div class="tableBtn">
        <el-button type="primary" icon="el-icon-plus" @click="AddDialogFormVisible = true">新增</el-button>
      </div>
      <el-table :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
        :data="tableData" style="width: 100%">
        <el-table-column prop="id" type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="name" label="歌曲名称" width="380">
        </el-table-column>
        <el-table-column prop="state" label="文件格式" width="280">
        </el-table-column>
        <el-table-column prop="latLng" label="操作">
          <template slot-scope="scope">
            <!-- <span class="operter">添加到播放列表</span> -->
            <span class="operter" @click="delMusic(scope.row)">删除 </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block" style="margin-top: 15px">
        <el-pagination align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[1, 5, 10]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="DialogTitle" :visible.sync="AddDialogFormVisible" center width="30%" @close="CloseAddDialog">
      <el-form ref="AddForm" :model="AddForm">
        <el-form-item class="ipt_item" label="上传音频" prop="desc">
          <el-upload ref="VideoUpload" class="upload-demo" action="#" :auto-upload="false" :file-list="VideoFileList"
            :on-change="VideoHandleChange" :limit="1">
            <el-button slot="trigger" :disabled="VideoDis" size="small" type="primary">选取文件</el-button>
            <div slot="tip">仅支持上传单个音频。</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="AddDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('AddForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  </div>
</template>

<script>
  import {
    IPPBXLogin,
    getMusicList,
    uploadMusic,
    delMusic,
  } from "@/api/Audio";
  export default {
    components: {
      Map,
    },
    props: {},
    watch: {
      VideoUploadFiles(newVal, oldVal) {
        if (newVal.length > 0) {
          this.pictureDis = true;
          this.TextDis = true;
        } else {
          this.pictureDis = false;
          this.TextDis = false;
        }
      },
      "ruleForm.TextContent": {
        handler(newVal, oldVal) {
          if (newVal != "") {
            this.VideoDis = true;
            this.pictureDis = true;
          } else {
            this.VideoDis = false;
            this.pictureDis = false;
          }
        },
      },
    },
    mounted() {
      this.login();
    },
    data() {
      return {
        DialogTitle: "上传音乐文件",
        tableData: [],
        currentPage: 1, // 当前页码
        total: 20, // 总条数
        pageSize: 10, // 每页的数据条数
        // 新增弹窗
        AddDialogFormVisible: false,
        authorization:"",
        AddForm: {
          name: "",
          address: "",
        },
        VideoFileList: [],
        VideoDis: false,
        // 视频ref
        VideoUploadFiles: null,
      };

    },
    methods: {
      // 登录
      async login() {
        let data = await IPPBXLogin();
        console.log(data);
        this.authorization=data.data;
        if(data.code==0){
           this. Select();
        }
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleSizeChange(e) {
        this.pageSize = e;
        this.Select(false);
      },
      handleCurrentChange(e) {
        this.currentPage = e;
        this.Select(false);
      },
      // 查询
      async Select(type) {
        if (type) {
          this.currentPage = 1;
        }
        let {
          data: res
        } = await getMusicList({
          authorization:this.authorization,
          page: this.currentPage,
          pageSize: this.pageSize,
        });
        console.log(res);
        this.tableData = [];
        this.total = Number(res.count);
        res.items.forEach((e) => {
          let item = {
            id: e.id,
            name: e.showName,
            state: e.fileFormat
          };
          this.tableData.push(item);
        });
      },
      // 删除该播放列表
      delMusic(row) {
        this.$confirm("此操作将永久删除该播放列表, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            console.log(row);
            delMusic({
              authorization: this.authorization,
              ids: "[" + row.id + "]"
            }).then((res) => {
              if (res.message) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.Select(true);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      //   视频
      VideoHandleChange(file, fileList) {
        //console.log(file.name);
        this.VideoUploadFiles = this.$refs.VideoUpload.uploadFiles;
        const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
        const whiteList = ["mp3"];

        if (this.VideoUploadFiles.length > 1) {
          this.VideoUploadFiles = this.VideoUploadFiles.slice(
            0,
            this.VideoUploadFiles.length - 1
          );
          this.$message("只能上传一个文件");
        } else {
          if (whiteList.indexOf(fileSuffix) === -1) {
            this.$message("上传文件只能是 mp4、flv、f4v、webm格式");
            this.$refs.VideoUpload.uploadFiles = [];
          }
        }
      },
      CloseAddDialog() {
        this.$refs["AddForm"].resetFields();
        this.DialogTitle = "上传音乐文件";
        this.isAdd = true;
        this.EditQuery = {};
      },
      submitForm(formName) {
        let that = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 判断至少填一种类型
            if (
              that.VideoUploadFiles.length != 0
            ) {
              //   整理数据 TextData PictureData VideoData
              let formData = new FormData();
              let VideoData;
              if (that.VideoUploadFiles.length > 0) {
                VideoData = that.VideoUploadFiles[0].raw;
                formData.append("file", VideoData);
                formData.append("authorization", this.authorization);
                this.UploadInfo(formData);
              }

            } else {
              this.$message({
                message: '请上传音频文件',
                type: "warning",
              });
            }
          } else {
            return false;
          }
        });
      },
      async UploadInfo(FromData_) {
        // 上传文件 获取url
        try {
          let data = await uploadMusic(FromData_);
          console.log(data);
          if(data.message){
            this.$message({
              type: "success",
              message: "上传成功!",
            });
            this.AddDialogFormVisible = false
            this.Select(true);
          }
        } catch (error) {
          console.error("An error occurred:", error);
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .body_ {
    overflow: hidden;
    padding-top: 0.2625rem;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: column;

    //height: 820px;
    .header {
      width: 100%;
      //height: 0.85rem /* 68/80 */;
      border-radius: 4px;
      background-color: rgb(255, 255, 255);
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }

    .main {
      margin-top: 0.3rem
        /* 24/80 */
      ;
      width: 100%;
      //height: 8.925rem /* 618/80 */;
      border-radius: 4px;
      background-color: rgb(255, 255, 255);
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      flex: 1;
    }
  }

  .operter {
    color: rgba(59, 140, 255, 1) !important;
    cursor: pointer;
    margin-right: 4px;
  }
</style>
